<script setup>
import { ref, onMounted } from 'vue';
import { ScenicIndex, StrategyIndex } from '../api/scenic.js';
const ScenicData = ref(null);
const StrategyData = ref(null);

ScenicIndex().then(function (res) {
  ScenicData.value = res.data;
});

StrategyIndex({ scenic_id: 2 }).then(function (res) {
  StrategyData.value = res.data;
});

</script>

<template>
  <div class="body">
    <!-- 主图加顶部信息与搜索框 -->
    <div class="container">
      <div class="temperature">
        <img src="../assets/temperature.png" alt="">
        25℃
      </div>
      <div>济源</div>
      <div>王屋山景区</div>
      <div class="search">
        <img src="../assets/search.svg" alt="">
        <input type="text" placeholder="搜索">
      </div>
      <!-- 菜单选项盒子 -->
      <div class="muen_box">
        <!-- 单个选项盒子 -->
        <div class="single_muen">
          <img src="../assets/sold.png" alt="">
          <p>售票专区</p>
        </div>
        <!-- 单个选项盒子 -->
        <div class="single_muen">
          <img src="../assets/speak.png" alt="">
          <p>景区讲解</p>
        </div>
        <!-- 单个选项盒子 -->
        <div class="single_muen">
          <router-link to="map">
            <img src="../assets/map.png" alt="">
            <p>景区地图</p>
          </router-link>
        </div>
        <!-- 单个选项盒子 -->
        <div class="single_muen">
          <img src="../assets/explain.png" alt="">
          <p>使用说明</p>
        </div>
        <!-- 单个选项盒子 -->
        <div class="single_muen">
          <router-link to="herald">
            <img src="../assets/herald.png" alt="">
            <p>演出预告</p>
          </router-link>
        </div>
      </div>
    </div>

    <div class="affiche">
      <img src="../assets/horn.png" alt="">
      这里是公告
    </div>
    <div class="class_box">
      <img src="../assets/strategy.png" alt="" class="strategy">
      <div class="right_class_box">
        <img src="../assets/activity.png" alt="">
        <img src="../assets/List.png" alt="">
      </div>
    </div>
    <!-- 推荐景区 -->
    <div class="commend_box">
      <div class="commend_left_box">
        <img src="../assets/fire.png" alt="">
        推荐景区
      </div>
      <div class="commend_right_box">
        更多
        <img src="../assets/arrows.png" alt="">
      </div>
    </div>
    <!-- 景区的盒子 -->
    <div class="scenic_box">
      <!-- 单个景区的详情的盒子 -->
      <div class="scenic_details" v-for="(item, index) in ScenicData" :key="item.id">
        <img :src="'https://jingqu.kuxia.top' + item.img" alt="">
        <div class="scenic_info">
          <!-- 景区名称 -->
          <div class="scenic_name">
            {{ item.name }}
          </div>
          <!-- 底部的操作 -->
          <div class="operate">
            <!-- 评分 -->
            <p class="grade">
              {{ item.score }}分
            </p>
            <div class="line"></div>
            <!-- 评价 -->
            <p class="assess">
              评价{{ item.num > 999 ? '999+' : item.num }}
            </p>
            <div class="like">
              <img src="../assets/likeyou.png" alt="">
              {{ item.number > 999 ? '999+' : item.number }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="commend_box">
      <div class="commend_left_box">
        <img src="../assets/fire.png" alt="">
        推荐攻略
      </div>
      <div class="commend_right_box">
        更多
        <img src="../assets/arrows.png" alt="">
      </div>
    </div>
    <div class="scenic_box">
      <!-- 单个景区的详情的盒子 -->
      <div class="scenic_details" v-for="(item, index) in StrategyData" :key="item.id">
        <img :src="'https://jingqu.kuxia.top' + item.img" alt="">
        <div class="scenic_info">
          <!-- 景区名称 -->
          <div class="scenic_name">
            {{ item.name }}
          </div>
          <!-- 底部的操作 -->
          <div class="operate">
            <!-- 头像 -->
            <div class="avatar">
              <img :src="'https://jingqu.kuxia.top' + item.img" alt="">
            </div>
            <div class="like">
              <img src="../assets/likeyou.png" alt="">
              {{ item.like_num == null ? '0' : item.like_num > 999 ? "999+" : item.like_num }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 暂无提示 -->
    <div class="not_yet">
      没有更多了…
    </div>
    <!-- 底部导航栏 -->
    <div class="Bottom_navigation">
      <!-- 底部单个选项 -->
      <div class="bottom_single_option active">
        <img src="../assets/bottom_home.png" alt="">
        <p>首页</p>
      </div>
      <!-- 底部单个选项 -->
      <div class="bottom_single_option">
        <router-link to="strategy">
          <img src="../assets/local_florist.png" alt="">
          <p>攻略</p>
        </router-link>
      </div>
      <!-- 底部单个选项 -->
      <div class="bottom_single_option">
        <div class="publish">
          <img src="../assets/plane.png" alt="">
        </div>
        <img src="" alt="">
        <p>发布</p>
      </div>
      <!-- 底部单个选项 -->
      <div class="bottom_single_option">
        <img src="../assets/scenic.png" alt="">
        <p>排行榜</p>
      </div>
      <!-- 底部单个选项 -->
      <div class="bottom_single_option">
        <router-link to="mine">
          <img src="../assets/account_circle.png" alt="">
          <p>我的</p>
        </router-link>
      </div>
    </div>
  </div>
</template>

<style scoped>
input:focus {
  outline: none;
  /* 移除默认轮廓 */
}

a {
  display: inline;
  width: 0;
  height: 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  color: black;
  text-decoration: none;
  /* 可选：移除下划线 */
}

/* 顶部主图和整体信息 */
.container {
  background-image: url('../assets/Mainimage.png');
  background-size: 150% 120%;
  background-repeat: no-repeat;
  width: 100%;
  height: 260px;
  padding: 0px 10px;
  padding-top: 80px;
  font-size: 18px;
  font-weight: bold;
  color: white;
}

/* 温度信息 */
.temperature {
  display: flex;
  align-items: center;
}

/* 温度图表 */
.temperature img {
  width: 30px;
  height: 30px;
}

/* 搜索 */
.search {
  width: 100%;
  height: 30px;
  position: relative;
}

.search img {
  width: 15px;
  height: 15px;
  position: absolute;
  top: 10px;
  left: 10px;
}

.search input {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  padding-left: 30px;
  border: 1px solid white;
}

/* 菜单整体盒子 */
.muen_box {
  width: 100%;
  margin-top: 10px;
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
  background-color: white;
  padding-bottom: 10px;
  box-shadow:
    3px 3px 5px rgba(0, 0, 0, 0.2),
    /* 外阴影 */
    inset -2px -2px 5px rgba(255, 255, 255, 0.5);
  /* 内高光 */
}

/* 单个选择的盒子 */
.single_muen {
  width: 20%;
  text-align: center;
  font-size: 14px;
  color: black;
}

.single_muen p {
  font-size: 13px;
}

.single_muen img {
  margin: auto;
  margin-top: 15px;
  width: 55%;
}

/* 公告内容 */
.affiche {
  width: 100%;
  height: 25px;
  margin-top: 45px;
  color: #FFC300;
  display: flex;
  align-items: center;
  background-color: rgba(255, 195, 0, 0.2);
}

.affiche img {
  width: 20px;
  height: 18px;
}

/* 分类盒子 */
.class_box {
  width: 100%;
  height: 180px;
  margin-top: 5px;
  display: flex;
}

.strategy {
  width: 50%;
  height: 100%;
}

/* 两个选项的盒子 */
.right_class_box {
  width: 50%;
  height: 100%;
}

.right_class_box img {
  width: 100%;
  height: 48%;
}

/* 推荐盒子 */
.commend_box {
  width: 100%;
  height: 25px;
  margin-top: 3px;
  display: flex;
  align-items: center;
  background-color: #E2EEFD;
  justify-content: space-between;
}

.commend_left_box {
  display: flex;
  align-items: center;
}

.commend_left_box img {
  width: 20px;
  height: 25px;
}

.commend_right_box {
  padding: 0px 5px;
  height: 20px;
  display: flex;
  align-items: center;
  background: white;
  border-radius: 10px;
}

.commend_right_box img {
  width: 12px;
  height: 12px;
}

/* 景区的盒子 */
.scenic_box {
  width: 100%;
  margin-top: 3px;
  column-count: 2;
  column-gap: 5px;
  padding: 0px 5px;
  margin-bottom: 8px;
}

/* 单个景区的详情的盒子 */
.scenic_details {
  width: 100%;
  background-color: white;
  margin-top: 5px;
  border-radius: 8px;
  box-shadow:
    3px 3px 5px rgba(0, 0, 0, 0.2),
    inset -2px -2px 5px rgba(255, 255, 255, 0.5);
  display: inline-block;
  /* 解决多列布局的怪异模式 */
  vertical-align: top;
  /* 对齐顶部 */
}

.scenic_details img {
  width: 100%;
  border-radius: 8px 8px;
}

/* 底部信息 */
.scenic_info {
  width: 100%;
  padding: 0px 3px;
}

.operate {
  padding: 0px 3px;
  display: flex;
  margin-bottom: 3px;
  align-items: center;
  justify-content: space-between;
}

.line {
  width: 0.1px;
  height: 18px;
  margin: 0px 5px;
  background-color: black;
}

.like {
  display: flex;
  align-items: center;
}

.like img {
  width: 15px;
  height: 15px;
}

.grade {
  display: flex;
}

/* 头像 */
.avatar {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
}
</style>
